import React,{useState,useEffect} from 'react'
import { useSelector } from 'react-redux';
import { Grid, NavBar ,Image } from 'react-vant';
import widthRoute from '../Utils/widthRoute';
import {STORETYPE } from '../Type/Store.d';

function SearchList(route:any) {
    console.log(route.route.Location.state);
    const childrenList = useSelector((state:STORETYPE)=>state.childrenList);
    const filterList = childrenList.filter(item=>(item.txt as string).includes(route.route.Location.state));
    // console.log(filterList,'----filterList');
    
    return (
        <div className='SearchList'>
            <NavBar
                title="搜索结果页面"
                leftText="返回"
                onClickLeft={() => route.route.Navigate(-1)}
            />
            {/* 点击搜索按钮进行搜索，搜索结果可作为单独的页面或展示在搜索页内 */}
            <Grid columnNum={2}>
                {filterList.map((item, index) => (
                    // 点击商品进入到商品详情
                    <Grid.Item key={index} onClick={()=>route.route.Navigate('/Detail/'+item.id,{state:item})}>
                        <Image width="100" height="100" src={item.src} />
                        <p>{item.txt}</p>
                        <p style={{color:'red'}}>￥{item.price}元</p>
                    </Grid.Item>
                ))}
            </Grid>
        </div>
    )
}

export default widthRoute(SearchList)